const detailEle = document.querySelector('#detail')
const productEle = document.querySelector('#product')
const topEle = document.querySelector('#toTop');
let thisProduct = {} //当前商品对象定义成全局对象，购物车添加的时候需要用
// 根据id找到当前商品数据
function findId() {
    let url = location.href //http://127.0.0.1:5500/day89-96%E9%A1%B9%E7%9B%AE/productShop/src/pages/productDetail.html?id=38
    let index = url.indexOf('?')
    url = url.substring(index + 1) //不写结束索引号，就是截取到最后
    let arr = url.split('=')
    return arr[1]
}
// 去后台获取相应id的数据
function getProduct() {
    let id = findId()
    myAjaxPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/find',
        data: {
            id,
        }
    }).then(result => {
        if (result.resultCode == 1) {
            let data = result.resultInfo
            // 加载页面
            thisProduct = data
            loadProduct(data)
            loadProductDetail(data)
        }
    }).catch(err => {
        alert(err)
    })
}
getProduct()
// 渲染商品详情上部分界面
function loadProduct(product) {
    let str = ` <div class="images">
                    <div class="left">
                        <div class="show">
                            <img src="${product.list[0]}" alt="">
                            <div class="mask"></div>
                            </div>
                        <ul>
                            <li class="active"><img src="${product.list[0]}" alt=""></li>
                            <li><img src="${product.list[1]}" alt=""></li>
                            <li><img src="${product.list[2]}" alt=""></li>
                            <li><img src="${product.list[3]}" alt=""></li>
                        </ul>
                    </div>
                    <div class="big">
                        <img src="${product.list[0]}" alt="">
                    </div>
                </div>
                <div class="discription">
                    <h3>${product.shop}</h3>
                    <p>${product.product}</p>
                    <p class="price"><span class="text">惊爆价：</span> ￥<span>${product.price}</span></p>
                    <form action="#" method="post">配送至：
                        <select name="address">
                            <option value="四川">四川</option>
                            <option value="重庆">重庆</option>
                            <option value="云南">云南</option>
                            <option value="云南">贵州</option>
                        </select>
                    </form>
                    <button class="addProduct">加入购物车</button>
                        <button class="lookCart">查看购物车</button>
                </div>`
    productEle.innerHTML = str
    toCart()
    onTab()
    onGlass()
}
// 渲染商品详情下部分界面
function loadProductDetail(product) {
    // 商品详情页的图片，根据后台数据的个数来动态生成
    let list = product.list
    let str = `<h2>商品详情</h2>
               <div class="images">`
    list.forEach(item => {
        let newStr = `<img src="${item}" alt="">`
        str += newStr
    });
    str += '</div>'
    detailEle.innerHTML = str
}
// 选项卡tab切换商品图片
function onTab() {
    // 这几个数据的动态渲染的，不能定义成全局变量，更不能用const来定义
    let liEle = document.querySelectorAll('#product li')
    let showImgEle = document.querySelector('#product .show img')
    let bigImgEle = document.querySelector('#product .big>img')
    liEle.forEach((item, index) => {
        item.addEventListener('click', function () {
            // 清除所有样式
            liEle.forEach(item => {
                item.classList.remove('active')
            })
            this.classList.add('active')
            // 直接用这个的话会让show里面动态生成的mask消失掉，所以得另辟蹊径
            // showEle.innerHTML = this.innerHTML
            // 设置属性要记得给img设置，而不是给div设置
            showImgEle.setAttribute('src', thisProduct.list[index])
            // bigEle.innerHTML = this.innerHTML
            bigImgEle.setAttribute('src', thisProduct.list[index])
        })
    })
}
// 放大镜效果
function onGlass() {
    let maskEle = document.querySelector('.mask')
    let showEle = document.querySelector('#product .show')
    let bigEle = document.querySelector('#product .big')
    let bigImgEle = document.querySelector('#product .big>img')
    // 遮罩层mask移入显示，移出隐藏
    showEle.addEventListener('mouseover', function () {
        maskEle.style.display = 'block'
        bigImgEle.style.display = 'block'
    })
    showEle.addEventListener('mouseout', function () {
        maskEle.style.display = 'none'
        bigImgEle.style.display = 'none'
    })
    // 获取各种元素的宽高
    let maskW = parseInt(window.getComputedStyle(maskEle).width)
    let maskH = parseInt(window.getComputedStyle(maskEle).height)
    let showW = parseInt(window.getComputedStyle(showEle).width)
    let showH = parseInt(window.getComputedStyle(showEle).height)
    let bigW = parseInt(window.getComputedStyle(bigEle).width)
    let bigH = parseInt(window.getComputedStyle(bigEle).height)
    // mask随着鼠标移动而移动
    showEle.addEventListener('mousemove', function (e) {
        e = e || window.event
        let x = e.offsetX - maskW / 2
        let y = e.offsetY - maskH / 2
        // 边界检测
        if (x < 0) {
            x = 0
        }
        if (x > showW - maskW) {
            x = showW - maskW
        }
        if (y < 0) {
            y = 0
        }
        if (y > showH - maskH) {
            y = showH - maskH
        }
        maskEle.style.left = x + 'px'
        maskEle.style.top = y + 'px'
        // 大盒子里面的图片随着mask的移动而移动
        // 计算比例
        /**
         * 计算放大镜盒子里面的图片宽高
         * m/s=b/bm
         * */
        let w = showW * bigW / maskW
        let h = showH * bigH / maskH
        // 设置大盒子里面图片宽高
        bigImgEle.style.width = w + 'px'
        bigImgEle.style.height = h + 'px'
        /**
         * 计算移动的距离，注意是要使用mask的移动距离xy的，主要是移动距离和两个盒子的宽高之间作比较
         * mx/bmx=m/b
         * */
        let moveX = bigW * x / maskW
        let moveY = bigH * y / maskH
        // 这只是动起来了，但是还得计算一哈比例，让放大镜更完美
        bigImgEle.style.left = -moveX + 'px'
        bigImgEle.style.top = -moveY + 'px'
    })
}
// 加入购物车
function toCart() {
    productEle.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        // 加入购物车按钮
        if (target.getAttribute('class') == 'addProduct') {
            // 根据id找到这个商品
            let id = findId()
            // 获取localStorage里面的东西，判断购物车里面是不是有这个商品，然后把商品存进去
            let productList = localStorage.getItem('MYCART')
            productList = JSON.parse(productList) || []
            let product = productList.find(item => item.id == id)
            if (confirm('是否确定加入购物车？')) {
                if (product) {
                    product.num++
                    product.singlePrice = (product.num * product.price).toFixed(2)
                } else {
                    let productObj = {
                        id: thisProduct.id,
                        price: thisProduct.price,
                        singlePrice: thisProduct.price,
                        product: thisProduct.product,
                        picture: thisProduct.picture,
                        num: 1,
                        state: false
                    }
                    productList.push(productObj)
                }
                localStorage.setItem('MYCART', JSON.stringify(productList))
                alert('加入购物车成功')
            }
        }
        // 查看购物车按钮，跳转到购物车界面
        if (target.getAttribute('class') == 'lookCart') {
            location.href = 'cart.html'
        }
    })
}
// 回到顶部
function toTop() {
    topEle.onclick = function () {
        document.documentElement.scrollTop = 0
    }
}
toTop()
// 点击logo回到首页
function toIndex() {
    const logoEle = document.querySelector('#header img')
    logoEle.onclick = function () {
        location.href = 'index.html'
    }
}
toIndex()